<template>
  <div class="container">
    <!-- <div class="filter">
      <van-field
        v-model="shipLock"
        is-link
        arrow-direction="down"
        readonly
        label=""
        placeholder="请选择"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
          title="请选择船闸"
          :columns="shipLockOptions"
          :columns-field-names="customFieldName"
          @cancel="showPicker = false"
          @confirm="confirmShipLock"
        />
      </van-popup>
    </div> -->
    <div class="record-table">
      <el-table stripe border :data="operateRecordData" >
        <el-table-column prop="hubLockName" label="船闸" width="150" />
        <el-table-column prop="actionType" label="操作行为" width="120" />
        <el-table-column prop="userName" label="操作人" />
        <el-table-column prop="operationMode" label="操作方式" width="100" />
        <el-table-column prop="operationTime" label="操作时间" width="200" />
      </el-table>      
    </div>    
    <van-pagination v-model="operationRecordPage" :page-count="Math.ceil(operationRecordTotal/5)" @change="changePage" mode="simple" />
  </div>
</template>

<script setup>
  import { ref, onMounted, nextTick } from 'vue';

  import { useRouter,useRoute } from "vue-router"; 
  const router = useRouter();
  const route = useRoute(); 

  // 引入api
  import {
    getShipLock, //获取船闸列表
    operateRecord, //船闸操作记录
  } from "@/bridge-h5/utils/myapi";

  //获取船闸
  const shipLock = ref('');
  const shipLockOptions = ref([]);
  const customFieldName = {
    text: 'name',
    value: 'name',
  };
  const getShipLockFunction = () => {
    getShipLock().then((res) => {
      if(res.code === 200 && res.data.length){
        shipLockOptions.value = res.data;
        // shipLock.value = res.data[0].name;
        handleOperationRecord();
      }
    });
  };
  const showPicker = ref(false);
  const confirmShipLock = ({ selectedOptions }) => {
    showPicker.value = false;
    shipLock.value = selectedOptions[0].name;
    handleOperationRecord();
  };

  //船闸操作记录
  const operationRecordPage = ref(1);
  const operationRecordSize = ref(10);
  const operationRecordTotal = ref(0);
  const operateRecordData = ref([]);
  const changePage = (value) => {
    operationRecordPage.value = value;
    handleOperationRecord();
  };
  const handleOperationRecord = () => {
    operateRecord(shipLock.value, operationRecordPage.value, operationRecordSize.value).then((res) => {
      if(res.code === 200 && res.data){
        operateRecordData.value = res.data.data;
        operationRecordTotal.value = res.data.totalPage;
      }
    });
  };

  onMounted(() => {
    shipLock.value = route.query.shipLockName;
    getShipLockFunction();
  });
</script>

<style lang="scss" scoped>
  .container{
    .filter{
      margin: 8px 16px;
    }
    .record-table{
      margin: 16px;
    }
  }
</style>